---
import { promises as fs } from 'fs';
import path from 'path';

import prefabs from 'prefabs/index.js';

import Layout from 'layouts/Layout.astro';
import Paginator from 'components/Paginator.astro';
import Image from 'components/Image.astro';
import PreviewCardList from 'components/PreviewCardList.astro';
import ListingChips from 'components/ListingChips.astro';

export async function getStaticPaths() {
  const pagePath = path.join(
    process.cwd(),
    '.content',
    'pages',
    '[lang]',
    '[...listing].json'
  );
  const pageData = await fs.readFile(pagePath, 'utf8').then(JSON.parse);
  return Object.values(pageData).map(({ params, props }) => {
    return {
      params: {
        lang: params.lang,
        listing: params.listing.join('/'),
      },
      props,
    };
  });
}

const {
  slug,
  paginator = null,
  collection,
  collectionItems,
  pageDescription,
  structuredData,
} = Astro.props;
---

<Layout
  title={structuredData ? structuredData.name : collection.name}
  description={pageDescription}
  logoSrc={collection.cover ? collection.cover : undefined}
  structuredData={structuredData}
  canonical={slug}
>
  <div class='snippet-list-header g-c1 a-center'>
    <div class='md:order-2 md:f-right my-2 mx-3.5 f-center'>
      <Image
        src={collection.cover}
        alt=''
        height='240'
        width='240'
        fetchpriority='high'
        class='br-md'
      />
    </div>
    <div>
      <h2 class={prefabs.listingTitle}>{collection.name}</h2>
      <p class='lh-loose mt-4 mx-3.5 mb-2 txt-100 fs-sm md:fs-md'>
        {collection.description}
      </p>
    </div>
  </div>
  {
    collection.sublinks.length ? (
      <ListingChips items={collection.sublinks} />
    ) : null
  }
  <div class='g-c3'>
    <PreviewCardList contentItems={collectionItems} />
    {paginator ? <Paginator paginator={paginator} /> : null}
  </div>
</Layout>
